<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
</body>
<script>
    /*
        http get和post的区别
        1. 一般情况下 get常用于获取数据, post常用于发送数据  =>   get也可以在请求时携带数据(发送数据)
        2. 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
           以post方式传递数据时,利用http post传输机制,将数据放在请求主体中在header传递,地址栏看不到
        3. 以get方式发送请求时,传输速度较快, post相对较慢
        4. 以get方式发送请求时 数据在地址栏可见, 安全性不高 , post存放请求主体中随header传递 安全性较高
        5. get方式传递数据时不能超过4k(中文可能会被编码)  post传递数据时默认不受限制


        get方式传参

        post方式传参
    */

    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    // 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
    getBtn.onclick = function () {
        // 第一个请求
        // 判断用户名是否存在?
        var wd = "";  // 搜素的关键词 默认请求所有
        var col = "id"; // 排序的列名 默认id排序
        var type = "asc"; // 排序的方式 默认升序
        var page = 1;  // 页码 默认显示第一页
        var size = 10; // 每页显示多少条 默认(10)

        // `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`

        // debugger;

        // get("http://43.138.81.225/demo/php/searchGoodsOrderLimit.php", `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true, "json", function (data) {
        //     //  debugger;
        //     console.log("请求成功", data);
        // })


        get(`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php", true, "json", function (data) {
            //  debugger;
            console.log("请求成功", data);
        })


    }


    // 以get向接口发送请求
    // url       请求的地址
    // data      携带数据
    // async     是否异步
    // dataType  接口返回数据类型(text/xml/css/js/json)
    // success   请求成功时执行的回调函数 => 回调函数有一个形式参数 => 用于接收请求成功时的数据 


    // 回调函数(把函数当成参数传到另一个函数中 让它在另一个函数中执行 => 可以理解为提前决定好要执行的内容 指定时间执行 => 锦囊妙计)
    // 回调函数 => 异步编程的一种解决方法


    // 缺点1:
    // 多参数传参 讲究一一对应   => 参数要严格对应 否则请求失败





    function get(url, data = "", async = true, dataType = "text", success) {

        var xhr = new XMLHttpRequest();

        xhr.open("get", data ? (url + "?" + data) : url, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                if (dataType == "json") {
                    result = JSON.parse(result);
                }
                // console.log(result);

                // 拿到数据   => 执行后续的操作  => 多种多样
                // 登录  => 登录成功/失败
                // 查询数据  => 查询成功/失败
                // 删除数据  => 成功/失败
                // 新增数据  => 成功/失败

                if (success && typeof success === "function") {
                    success(result);  //实参  => 请求成功时的数据
                }


            }
        }
    }





</script>

</html>